<template>
    <div>
        <el-container>
            <el-aside width="400px" style="height: 400px;">
                <el-card shadow="always" style="padding-bottom: 20px;">
                    <el-form :mdoel="customerFormData" label-position="left" class="demo-table-expand">
                        <el-form-item label="宠物名：">
                            <span>{{ customerFormData.petName }}</span>
                        </el-form-item>
                        <el-form-item label="主人名：">
                            <span>{{ customerFormData.customerName }}</span>
                        </el-form-item>
                        <el-form-item label="体重：">
                            <span>{{ customerFormData.weight }}kg</span>
                        </el-form-item>
                        <el-form-item label="年龄：">
                            <span>{{ customerFormData.age }}岁</span>
                        </el-form-item>
                        <el-form-item label="预约时间：">
                            <span>{{ customerFormData.reserveTime }}</span>
                        </el-form-item>
                        <el-form-item label="问诊时间：">
                            <span>{{ customerFormData.diagnosisTime }}</span>
                        </el-form-item>
                        <el-form-item label="病情概述:">
                            <span>{{ customerFormData.diseaseAnalysis }}</span>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-aside>
            <el-main style="padding:0 0 0 20px;">

                <el-card style="text-align: center;">
                    <div slot="header" class="clearfix" style="height: 5px;line-height: 5px;">
                        <span>检查记录</span>
                    </div>
                    <div>
                        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick"
                            style="min-height: 300px;">
                            <el-tab-pane label="血液生化" name="first">
                                <el-table :data="checkResult" style="width: 100%" v-if="checkResult != null">
                                    <el-table-column prop="attributeName" label="属性" width="100" >
                                    </el-table-column>
                                    <el-table-column prop="exam" label="数值" width="180">
                                    </el-table-column>
                                    <el-table-column prop="standardValue" label="参考值">
                                    </el-table-column>
                                </el-table>
                                <p v-else>暂无数据</p>
                            </el-tab-pane>
                            <el-tab-pane label="超声检查" name="second">
                                <el-table :data="checkResult" style="width: 100%" v-if="checkResult != null">
                                    <el-table-column prop="attributeName" label="属性" width="180">
                                    </el-table-column>
                                    <el-table-column prop="exam" label="数值" width="180">
                                    </el-table-column>
                                    <el-table-column prop="standardValue" label="参考值">
                                    </el-table-column>
                                </el-table>
                                <p v-else>暂无数据</p>
                            </el-tab-pane>
                            <el-tab-pane label="尿常规" name="third">
                                <el-table :data="checkResult" style="width: 100%" v-if="checkResult != null">
                                    <el-table-column prop="attributeName" label="属性" width="180">
                                    </el-table-column>
                                    <el-table-column prop="exam" label="数值" width="180">
                                    </el-table-column>
                                    <el-table-column prop="standardValue" label="参考值">
                                    </el-table-column>
                                </el-table>
                                <p v-else>暂无数据</p>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-card>
            </el-main>
        </el-container>
        <div>
            <el-form :model="planForm">
                <el-form-item label="治疗方案" label-width="100px">
                    <el-input v-model="planForm.treatmentPlan" autocomplete="off" type="textarea"
                        style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="药物：" label-width="100px">
                    <el-select style="width: 300px;" v-model="planForm.drugArr" filterable multiple placeholder="请选择药物"
                        loading-text>
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="医嘱：" label-width="100px">
                    <el-input v-model="planForm.doctorTell" autocomplete="off" type="textarea"
                        style="width: 300px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" style="margin-left: 350px;">
                <el-button type="primary" @click="save">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName: "first",
            treatId: 0,
            customerFormData: {},
            planForm: {},
            options: [],
            checkResult: []
        }
    },
    methods: {
        save() {
            this.planForm.id = this.treatId
            this.planForm.customerId=JSON.parse(localStorage.getItem("customer")).id
            console.log("planform==>",this.planForm)
            this.request.post("/diagnosis/updatereview", this.planForm).then(res => {
                if(res.code == 200){
                    this.$message.success("复诊成功")
                    this.$router.push("/treatment")
                }
            })

        },
        drugSelectChange() {

        },
        getCheckResult(auxiliaryCheckId) {//获取检查结果
            console.log("getCheckResult==>", auxiliaryCheckId)
            this.request.get("/attribute-exam/byDiagnosis/", {
                params: {
                    diagnosisId: this.treatId,
                    auxiliaryCheckId: auxiliaryCheckId
                }
            }).then(res => {
                console.log("getCheckResult==>", res)
                if (res.code == 200) {
                    this.checkResult = res.data
                }

            })
        },
        handleClick(tab, event) {
            console.log("tab==>", tab.index)
            console.log("当前inde11x==>", event)
            this.getCheckResult(parseInt(tab.index) + 1)
        },
        getDrugSelect() {//获取药物列表下拉框
            this.request.get("/drug").then(res => {
                if (res.code == 200) {
                    this.options = res.data.map((item) => {
                        return { value: item.drugId, label: item.drugName }
                    })
                }
            })
        },
        load() {
            this.request.get("/diagnosis/getreviewtreatinfo/" + this.treatId).then(res => {
                this.customerFormData = res.data
                console.log("当前res===>", res)
                this.getCheckResult(1)
            })
        }
    },
    created() {

    },
    mounted() {
        this.treatId = this.$route.params.id;
        console.log("当前id===>", this.treatId)
        this.load()
        this.getDrugSelect()
    }
}
</script>

<style lang="less" scoped>
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.check {
    .el-col {
        padding: 5px 5px;
    }
}
</style>